<template>
  <div>
<ArtList :list="list" @needLoad="loadHandler"></ArtList>
  </div>
</template>

<script>
 import ArtList from '../../components/home/ArtList.vue'
  export default {
    components:{
      ArtList
    },
    data() {
      return {
        list:[],
        page:1,
        hasData:true
      }
    },
   methods:{
    // 封装请求数据的方法
    // 上面有hasData方法,控制页面请求数据的次数,避免页面性能浪费
     async getData(page=1){
      const { status,data } = await this.$http.get('/getArtListOfHot?page='+page)
      if(status!=200) return this.$message.error(data.msg)
      if(data.artList.length===0) return (this.hasData=false)
      this.list = [...this.list,...data.artList]
      // this.total=data.total
    },
    loadHandler(){
      if(!this.hasData) return
      this.page++
      this.getData(this.page)
    }
    },
    created() {
      this.getData()
    },
  }
</script>

<style lang="less" scoped>

</style>